// 投标管理
<template>
  <div class="bidHome">
    <!-- ===================================================== -->
    <!-- 表单 -->
    <el-form :inline="true" :model="bid_search_data" class="searchReset" label-width="350px">
      <!-- 查询重置栏 -->
      <el-form-item label="项目名称:">
        <el-input class="project_name" v-model="bid_search_data.name" placeholder="请输入" style="width: 200px"></el-input>
      </el-form-item>
      <!-- =========== -->
      <el-form-item label="项目地区:">
        <el-select class="project_area" v-model="bid_search_data.area" placeholder="请选择" style="width: 200px">
          <el-option v-for="item in options_project_area" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- =========== -->
      <el-form-item label=" 开发商名:">
        <el-input class="project_developers" v-model="bid_search_data.kai_fa_name" placeholder="请输入"
          style="width: 200px"></el-input>
      </el-form-item>

      <el-form-item label="保证金缴纳:">
        <el-select class="options_deposit" v-model="bid_search_data.pay_money" placeholder="请选择" style="width: 200px">
          <el-option v-for="item in options_deposit_payment" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- ============ -->
      <el-form-item label="投标状态:">
        <el-select class="bid_state" v-model="bid_search_data.statu" placeholder="请选择" style="width: 200px">
          <el-option v-for="item in option_bid_state" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- ============= -->
      <el-form-item label="创建日期:">
        <!-- <el-select class="create_date" v-model="bid_search_data.create_date" placeholder="请选择" style="width: 200px">
          <el-option v-for="item in option_create_date" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select> -->
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="bid_search_data.create_date" style="width: 200px;">
          </el-date-picker>
        </el-col>
      </el-form-item>
      <!-- 查询重置按钮 -->
      <el-form-item class="searchReset_btn">
        <el-button class="search_btn" type="primary" @click="searchBid">查询</el-button>
        <el-button class="reset_btn" @click="resetBit">重置</el-button>
      </el-form-item>
      <!-- 新增按钮 -->
      <el-form-item class="add_btn">
        <el-button type="primary" @click="addBid_jump">新增投标</el-button>
      </el-form-item>
    </el-form>

    <!-- 投标表格 -->
    <div class="bidTable">
      <el-table :data="bid_tableData" border style="width: 100%" class>
        <el-table-column label="序号">
          <template slot-scope="scope">{{
              scope.$index + (taxis_pager.page - 1) * taxis_pager.pagerow + 1
          }}</template>
        </el-table-column>
        <el-table-column prop="name" label="项目名称"></el-table-column>
        <el-table-column prop="area" label="项目地区"></el-table-column>
        <el-table-column prop="kaiFaName" label="开发商名"></el-table-column>
        <el-table-column prop="bidBeginDate" label="投标开始日期"></el-table-column>
        <el-table-column prop="bidEndDate" label="投标结束日期"></el-table-column>
        <el-table-column prop="bidMoney" label="保证金缴纳"></el-table-column>
        <el-table-column prop="chargeName" label="创建人"></el-table-column>
        <el-table-column prop="todo" label="操作">
          <!-- 根据状态值渲染不同todo_list -->
          <template slot-scope="scope">
            <div class="todo_list">
              <div class="todo_list_type1" :class="scope.row.statu == 0 ? 'list_show_type' : ''">
                <el-button type="text" v-for="(item, index) in todo_list_type1" :key="index"
                  @click="handleClick(item.click)" style="margin-left: 10px">{{ item.name }}</el-button>
              </div>

              <div class="todo_list_type2" :class="scope.row.statu == 1 ? 'list_show_type' : ''">
                <el-button v-for="(item, index) in todo_list_type2" :key="index" type="text"
                  @click="handleClick(item.click)" style="margin-left: 10px">{{ item.name }}</el-button>
              </div>

              <div class="todo_list_type3" :class="scope.row.statu == 2 ? 'list_show_type' : ''">
                <el-button v-for="(item, index) in todo_list_type3" :key="index" type="text"
                  @click="handleClick(item.click, scope.$index, scope.row)" style="margin-left: 10px">{{ item.name }}
                </el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" :total="this.total"
      :current-page="this.bid_search_data.currentPage" @current-change="handleCurrentChange">
    </el-pagination>

    <!-- 弹窗 -->
    <!-- 进度更新弹窗 -->
    <el-dialog title="进度更新" :visible.sync="shipping_address_dialogTableVisible">
      <el-table :data="shipping_address_gridData" border>
        <el-table-column label="序号" width="80">
          <template slot-scope="scope">
            {{ scope.$index + (taxis_pager.page - 1) * taxis_pager.pagerow + 1 }}
          </template>
        </el-table-column>
        <el-table-column property="fenxiang" label="分项" width="80"></el-table-column>
        <el-table-column property="miaoshu" label="描述" width="80"></el-table-column>
        <el-table-column property="fuzeren" label="负责人" width="80"></el-table-column>
        <el-table-column property="kaishiriqi" label="开始日期"></el-table-column>
        <el-table-column property="jieshuriqi" label="结束日期"></el-table-column>
        <el-table-column property="todo" label="操作"></el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="shipping_address_dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="shipping_address_dialogTableVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 录入投标结果弹窗 -->
    <el-dialog title="进度更新" :visible.sync="bid_statu_dialogTableVisible">
      <el-form :model="bid_statu_form">
        <el-form-item label="是否中标" :label-width="formLabelWidth">
          <el-switch v-model="bid_statu_form.kaigaun" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="中标金额" :label-width="formLabelWidth">
          <el-input v-model="bid_statu_form.zhongbiaojinge" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="bid_statu_dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="bid_statu_dialogTableVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style src="../../../style/project/bid.css">
</style>

<script>
import bidMixin from "../../../minxins/projectMixin/bidMixin";

export default {
  mixins: [bidMixin],
  name: "bidHome",
  // =============================================================
  data() {
    return {

      // ====================
      // 选择框选项
      options_project_area: [
        {
          value: "成都",
          label: "成都",
        },
        {
          value: "上海",
          label: "上海",
        },
      ],
      options_deposit_payment: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
      ],
      option_bid_state: [
        {
          value: "未完成",
          label: "未完成",
        },
        {
          value: "已完成",
          label: "已完成",
        },
      ],
      option_create_date: [
        {
          value: "2015-3-1",
          label: "2015-3-1",
        },
        {
          value: "2015-1-1",
          label: "2015-1-1",
        },
      ],
      // ====================
      // 表格表头
      todo_list_type1: [
        { name: "编辑", type: "primary", size: "mini", click: "editData" },
        { name: "删除", type: "primary", size: "mini", click: "delData" },
        { name: "详情", type: "primary", size: "mini", click: "checkData" },
        {
          name: "进度更新",
          type: "primary",
          size: "mini",
          click: "progressUpdate",
        },
        {
          name: "录入投标结果",
          type: "primary",
          size: "mini",
          click: "biddingResults",
        },
      ],
      todo_list_type2: [
        { name: "编辑", type: "primary", size: "mini", click: "editData" },
        { name: "删除", type: "primary", size: "mini", click: "delData" },
        { name: "详情", type: "primary", size: "mini", click: "checkData" },
      ],
      todo_list_type3: [
        { name: "删除", type: "primary", size: "mini", click: "delData" },
        { name: "详情", type: "primary", size: "mini", click: "checkData" },
      ],
      pager: {
        page: 1, // 当前页
        pagerow: 2, // 每页展示条数
      },

      // 弹窗
      shipping_address_dialogTableVisible: false,
      shipping_address_gridData: [],

      bid_statu_dialogTableVisible: false,
      bid_statu_form: [],

      formLabelWidth: "100px",
    };
  },

  methods: {
    // 表格操作方法
    handleClick(i) {
      let onClick = i;
      this[onClick]();
    },
    // ====================
    // 编辑
    editData() {
      this.$router.push("/project/bid/editBid");
      this.$router.push({
        name: "editBid",
        params: {
          id: this.bid_tableData[0].id,
        },
      });
    },
    // 删除
    delData() {
      // 删除
      // 删除弹窗
      this.$confirm(
        "<h3>是否确认删除该投标</h3><p>删除后将不可恢复</p>",
        "删除确认",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      )
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 详情
    checkData() {
      // 详情
      // 跳转至pages/bidDetails
      this.$router.push("/project/bid/bidDetails");
    },
    // 进度更新
    progressUpdate() {
      // 进度更新
      // 进度更新弹窗
      this.shipping_address_dialogTableVisible = true;
    },
    // 录入投标结果
    biddingResults() {
      // 录入投标结果
      // 需要对状态值进行判断
      // 弹出对应的弹框（未完成/已完成）

      // 未完成
      this.$alert(
        "<h3>当前投标工作还未完成不支持录入中标结果操作</h3><p>请先更新投标工作进度为已完成</p>",
        "录入投标结果",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        }
      );

      // 已完成
      this.bid_statu_dialogTableVisible = true;
    },
  },
  mounted() {
    // 渲染表格
    this.getBid();
  },
};
</script>
